<template>
	<view>
		<view class="TC" v-if="isShow">
			<view class="box">

				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 24px;">公 告</view>
						<view style="color: rgb(189,189,189);">祝福视频</view>
						<view>
							<!-- 图片代替 -->
							<image style="padding-top: 36rpx;padding-bottom: 60rpx;"
								src="../../../static/icon/icon1/fz2.png" alt="">
								<!-- 视频 -->
								<!-- <video src=""></video> -->
						</view>

						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC">关 闭</button>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- <Mack></Mack> -->
		<view class="mack-a" :style=" 'filter: blur('+mackNum+'px);'">
			<view class="box">
				<view class="HomePage">
					<view class="Homeicon">
						<image src="../../../static/icon/calendar.png" mode=""></image>
						<text>主 页</text>
					</view>
					<!-- tab栏 -->

					<!-- <u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection> -->

					<view class="wrapper">
						<u-sticky bgColor="#fff">
							<u-tabs ref="tabs" height="40" bar-width="140" bar-height="5" :active-item-style="barStyle"
								:bold="false" :list="list" active-color="#9471fe" inactive-color="#D3D5E0"
								@change="sectionChange" font-size="30" :current="current"></u-tabs>
							<!-- <u-tabs ref="tabs" :list="list" bar-width="40rpx" active-color="#9471fe"
								inactive-color="#D3D5E0" bar-height="6rpx" @change="sectionChange" font-size="30rpx"
								is-scroll="false" :current="current"></u-tabs> -->
							<!-- <u-tabs-swiper ref="tabs"  :current="current" @change="sectionChange" inactive-color="#D3D5E0" :list="list"  bar-height="6" bar-width="80" active-color="#9471fe" is-scroll="false"></u-tabs-swiper> -->
						</u-sticky>
					</view>

					<!--  -->
					<view class="uniUl">
						<view class="game">游戏名称</view>
						<view class="position">标点位置</view>
						<view class="jl">奖励</view>
						<view class="state">状态</view>
					</view>


				</view>
			</view>
			<view class="list">
				<view>
					<view v-model="current" v-if="current=='0'">
						<view :class="color(index)" v-for="(item,index) in tasklist" :key="item.taskname">
							<view style="font-size: 38rpx;padding-right: 100rpx;color: #000;padding-left: 20rpx;">
								{{item.taskname}}
							</view>
							<view class="">
								<veiw>{{item.taskposition}}</veiw>
							</view>
							<view class="">
								<veiw>{{item.reward}}</veiw>
							</view>
							<button v-if="item.isShow">前往</button>
							<button v-else style="background: no-repeat;
							color: #bababa;
							border: 1px solid;">已完成</button>
						</view>
					</view>

					<view v-model="current" v-else-if="current=='1'">
						<view :class="color(index)" v-for="(item,index) in completelist" :key="item.taskname">

							<view style="font-size: 38rpx;padding-right: 100rpx;color: #000;padding-left: 20rpx;">
								{{item.taskname}}
							</view>
							<veiw>{{item.taskposition}}</veiw>
							<veiw>{{item.reward}}</veiw>
							<button v-if="item.isShow">前往</button>
							<button v-else>已完成</button>

						</view>
					</view>

					<view class="content" v-model="current" v-else="current=='2'">
						<view :class="color(index)" v-for="(item,index) in nocompletelist" :key="item.taskname">

							<view style="font-size: 38rpx;padding-right: 100rpx;color: #000;padding-left: 20rpx;">
								{{item.taskname}}
							</view>
							<veiw>{{item.taskposition}}</veiw>
							<veiw>{{item.reward}}</veiw>
							<button v-if="item.isShow">前往</button>
							<button v-else style="background: no-repeat;
			color: #bababa;
			border: 1px solid;">已完成</button>

						</view>
					</view>
				</view>
			</view>
			<TabBar></TabBar>
		</view>
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar-a.vue'
	export default {
		components: {
			TabBar,
		},
		created() {
			this.complete();
			this.nocomplete()
			console.log(this.current);
		},
		data() {
			return {
				barStyle: {
					// lineHeight:"106rpx"
				},
				mackNum: 3,
				isMack: true,
				isShow: true,
				completelist: [],
				nocompletelist: [],
				current: 0,
				title: "GameHome",
				list: [{
						name: '全部游戏'
					},
					{
						name: '已体验游戏'
					},
					{
						name: '未体验游戏'
					}
				],
				tasklist: [{
						taskname: "任务1",
						taskposition: "5栋1510",
						reward: "20Cool贝",
						isShow: true
					},
					{
						taskname: "任务2",
						taskposition: "5栋1510",
						reward: "20Cool贝",
						isShow: true
					},
					{
						taskname: "任务3",
						taskposition: "5栋1510",
						reward: "20Cool贝",
						isShow: false
					}
				]
			}
		},
		methods: {
			closeTC() {
				this.mackNum = 0
				this.isShow = !this.isShow
				console.log(this.isShow);
			},
			color(index) {
				let colorIndex = ''
				switch (true) {
					case index === 0: {
						colorIndex = 'categ list-item'
						break;
					}
					case index === 1: {
						colorIndex = 'categ1 list-item'
						break;
					}
					default: {
						colorIndex = 'categ2 list-item'
						break;
					}
				}
				return colorIndex
				// if(index%2==0){
				// 	return 'categ list-item'
				// } 
				// else{
				// 	return 'categ1 list-item'
				// }


			},
			sectionChange(index) {
				this.current = index;
				console.log(this.current);

			},
			// 完成任务
			complete() {
				this.completelist = this.tasklist.filter((item) => {
					return item.isShow == true
				})
				console.log(this.completelist);
			},
			// 未完成任务
			nocomplete() {
				this.nocompletelist = this.tasklist.filter((item) => {
					return item.isShow != true
				})
				console.log(this.nocompletelist);
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: calc(100vh);

		.mack-a {
			position: relative;
			height: calc(100vh);
		}

		.TC {
			.toptext {
				position: absolute;
				// top: -8%;
				top: 100rpx;
				left: 35%;
				z-index: 999;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.text-a {

					font-size: 46rpx;
				}

				.text-b {
					color: rgb(148, 113, 254);
					font-size: 32rpx;
				}
			}

			height: 100%;
			background-color: rgb(255, 255, 255);

			// background: linear-gradient(#7a52c0, #d7d7d7) no-repeat;
			.title {
				text-align: center;
				line-height: 100rpx;
				font-size: 60rpx;
				color: rgb(164, 133, 237);
			}

			.box {
				z-index: 99;
				background-color: #fff;

				.box1 {

					// margin-top: 20rpx;
					.box1-a {
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 300px;
						align-items: center;

						image {
							width: 459rpx;
							height: 319rpx;
						}
					}
				}

				.send {
					position: absolute;
					right: 52rpx;

					uni-button {
						border-radius: 100rpx;
						height: 92rpx;
						line-height: 92rpx;
						color: #fff;
						width: 144rpx;
						background: rgb(121, 72, 234);
						font-size: 28rpx;
					}
				}

				.box2-a {
					width: 94%;
					height: 16px;
					background-color: #fffefe7d;
					box-shadow: 0px 5px 50px #9e9e9e3b;
					border-radius: 0rem 0rem 10px 10px;
					/* opacity: 0.4; */
					position: absolute;
					left: 3%;
					bottom: -16px;
					// /* z-index: -1;
				}

				.u-input--border[data-v-fdbb9fe6] {
					border-radius: 100rpx;
					height: 96rpx;
					box-sizing: border-box;
					padding-top: 8rpx !important;
					margin-left: 10rpx;
				}

				.username {
					font-size: 18px;
					display: flex;
					align-items: center;

					image {
						width: 16px;
						height: 16px;
						margin-right: 4px;
					}
				}

				.password {
					font-size: 18px;
					display: flex;
					align-items: center;
					margin-top: 30px;

					image {
						width: 16px;
						margin-right: 4px;
						height: 16px;
					}
				}

				.sms {
					display: flex;
					justify-content: end;
					color: rgb(164, 133, 237);
					padding: 10% 0;
					padding-bottom: 12%;
					margin-right: 36rpx;
				}

				z-index: 99;
				background-color: #fff;
				box-sizing: border-box;
				padding: 48rpx;
				box-shadow: 0px 10rpx 100rpx #9e9e9e80;
				position: absolute;
				background: #fff;
				width: 90%;
				height: 818rpx;
				border-radius: 2%;
				top: 228rpx;
				left: 5%;

				.btnA {

					width: 67%;
					margin: 0px auto;
					// margin-top: 40%;

					uni-button {
						border-radius: 64rpx;
						background: linear-gradient(to right, #A272FC, #DE62D2);
					}
				}

				.btnB {
					width: 60%;

					uni-button {
						margin-top: 20rpx;
						border-radius: 32px;
						color: #7a52c0;
					}

					margin: 0px auto;
				}
			}
		}

		.categ {
			color: rgb(42, 130, 228);
		}

		.categ1 {
			color: rgb(255, 24, 53);
		}

		.categ2 {
			color: rgb(255, 178, 27);
		}

		.list {
			margin-top: 24rpx;
			height: calc(38vh);

			.list-item {
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				width: 92%;
				justify-content: space-around;
				background-color: #fff;
				margin: 28rpx;
				height: 156rpx;

				button {
					font-size: 12px;
					width: 132rpx;
					height: 66rpx;
				}

				uni-button {
					margin: 0 !important;
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
					color: #fff;
				}
			}
		}

		.box {
			height: 416rpx;

			.HomePage {

				.wrapper {
					// background: rgb(227, 236, 250);


					::v-deep .u-sticky {
						height: 100rpx;
						display: flex;
						justify-content: center;
					}

					::v-deep .u-tabs__wrapper__nav__item {
						padding: 0 32rpx;
					}
				}

				// height: 750rpx;
				position: relative;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0px 20rpx;

				.uniUl {
					margin-top: 20rpx;
					width: 95%;
					display: flex;
					justify-content: space-around;
					// position: absolute;
					// top: 70%;
					padding-bottom: 36rpx;

					.game {
						color: #CF91FF;
					}

					.position {
						color: #50E3C2;
					}

					.jl {
						color: #F56A9E;
					}

					.state {
						color: #A485ED;
					}
				}

				.Homeicon {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 56rpx 0rpx;

					image {
						width: 89rpx;
						height: 86rpx;
						margin-right: 20rpx;
					}

					text {
						margin-left: 16rpx;
						color: #9471fe;
						font-size: 31px;
					}
				}
			}
		}
	}
</style>